<template>
  <div id="lib-index">
    <div ref="refLibIndexHeader" id="lib-index-header" :class="[windowIsFocus === 1 ? 'window-focus' : 'window-blur']">
      <el-icon :size="20" style="margin-left: 6px;margin-right: 10px">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
          <path
            d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96c-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54c-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16z"
            fill="currentColor" />
        </svg>
      </el-icon>
      <div id="lib-index-header-button-group">
        <el-button @click="handleOpenIndexEdit" type="success" size="small" link>
          <el-icon :size="22">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none">
                <path
                  d="M5 4.25A2.25 2.25 0 0 1 7.25 2h8.5A2.25 2.25 0 0 1 18 4.25V12h3.5v3.25a3.25 3.25 0 0 1-3.25 3.25h-5.326a6.54 6.54 0 0 0 .057-1.5H16.5V4.25a.75.75 0 0 0-.75-.75h-8.5a.75.75 0 0 0-.75.75V11a6.52 6.52 0 0 0-1.5.174V4.25zM18 17h.25A1.75 1.75 0 0 0 20 15.25V13.5h-2V17zm-3.75-3.5h-2.626A6.537 6.537 0 0 0 9.966 12h4.284a.75.75 0 0 1 0 1.5zM8 5.75A.75.75 0 0 1 8.75 5h5.5a.75.75 0 0 1 0 1.5h-5.5A.75.75 0 0 1 8 5.75zm0 3.5a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5A.75.75 0 0 1 8 9.25zm4 8.25a5.5 5.5 0 1 0-11 0a5.5 5.5 0 0 0 11 0zM7 18l.001 2.503a.5.5 0 1 1-1 0V18H3.496a.5.5 0 0 1 0-1H6v-2.5a.5.5 0 0 1 1 0V17h2.497a.5.5 0 0 1 0 1H7z"
                  fill="currentColor" />
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button @click="handleOpenFavorite" type="warning" size="small" link>
          <el-icon :size="20">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28">
              <g fill="none">
                <path
                  d="M12.701 3.908c.532-1.078 2.069-1.078 2.6 0l2.692 5.452l6.017.875c1.19.173 1.664 1.634.804 2.473l-4.355 4.244l1.028 5.993c.204 1.185-1.04 2.088-2.103 1.529L14 21.644l-5.381 2.83c-1.064.559-2.307-.344-2.104-1.529l1.028-5.993l-4.355-4.244c-.86-.839-.385-2.3.804-2.473l6.017-.875l2.691-5.452z"
                  fill="currentColor" />
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button @click="handleOpenTagManagement" style="color:#BAACA4 !important;" size="small" link>
          <el-icon :size="20">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
              <path
                d="M29.707 7.293l-3-3a1 1 0 0 0-1.414 0L16 13.586V18h4.414l9.293-9.293a1 1 0 0 0 0-1.414zM19.586 16H18v-1.586l5-5L24.586 11zM26 9.586L24.414 8L26 6.414L27.586 8z"
                fill="currentColor"></path>
              <path d="M10 14a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm0-6a2 2 0 1 0 1.998 2.004A2.002 2.002 0 0 0 10 8z"
                fill="currentColor"></path>
              <path
                d="M27.006 14.235l-1.414 1.414L28 18.058L18.058 28L4 13.941V4h9.942l4.406 4.407l1.415-1.415l-4.407-4.406A2 2 0 0 0 13.94 2H4a2 2 0 0 0-2 2v9.941a2 2 0 0 0 .586 1.414l14.058 14.06a2.001 2.001 0 0 0 2.828 0l9.943-9.943a2.001 2.001 0 0 0 0-2.828z"
                fill="currentColor"></path>
            </svg>
          </el-icon>
        </el-button>
        <el-button @click="handleOpenReview" style="color:#9984AE !important;" size="small" link>
          <el-icon :size="20">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
              <path
                d="M255.66 112c-77.94 0-157.89 45.11-220.83 135.33a16 16 0 0 0-.27 17.77C82.92 340.8 161.8 400 255.66 400c92.84 0 173.34-59.38 221.79-135.25a16.14 16.14 0 0 0 0-17.47C428.89 172.28 347.8 112 255.66 112z"
                fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32">
              </path>
              <circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32">
              </circle>
            </svg>
          </el-icon>
        </el-button>
      </div>
      <el-button class="lib-header-search-button" v-show="searchButtonVisiable" @click="handleSearchButton">
        <span style="font-size:12px;">搜索一下</span>
        <el-icon :size="16">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
            <path d="M221.09 64a157.09 157.09 0 1 0 157.09 157.09A157.1 157.1 0 0 0 221.09 64z" fill="none"
              stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path>
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"
              d="M338.29 338.29L448 448"></path>
          </svg>
        </el-icon>
      </el-button>
      <n-modal v-model:show="inputVisiable" @before-leave="searchButtonVisiable = true">
        <n-card class="lib-header-search-input-area" content-style="padding: 0;" header-style="padding: 0;"
          :bordered="false" size="huge" role="dialog" aria-modal="true">
          <template #header>
            <el-input class="lib-header-search-input" v-model="searchInput" v-on:keyup.enter="handleSearch"
              placeholder="输入关键字进行搜索" size="small" />
          </template>
          <div id="lib-header-search-select-area" @mousedown="$event.preventDefault(); $event.stopPropagation()">
            <div id="lib-header-search-condition-radio-box">
              <div class="lib-header-search-condition">
                <span class="lib-header-search-condition-label">搜索类型:</span>
                <el-radio-group v-model="searchType" size="small">
                  <el-radio-button :label="0">
                    <el-icon>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 1024 1024">
                        <path
                          d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494zM402 549c0 5.4 4.4 9.5 9.8 9.5h32.4c5.4 0 9.8-4.2 9.8-9.4c0-28.2 25.8-51.6 58-51.6s58 23.4 58 51.5c0 25.3-21 47.2-49.3 50.9c-19.3 2.8-34.5 20.3-34.7 40.1v32c0 5.5 4.5 10 10 10h32c5.5 0 10-4.5 10-10v-12.2c0-6 4-11.5 9.7-13.3c44.6-14.4 75-54 74.3-98.9c-.8-55.5-49.2-100.8-108.5-101.6c-61.4-.7-111.5 45.6-111.5 103zm78 195a32 32 0 1 0 64 0a32 32 0 1 0-64 0z"
                          fill="currentColor"></path>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="1">
                    <el-icon>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 20 20">
                        <g fill="none">
                          <path
                            d="M8.765 7.076A.5.5 0 0 0 8 7.5v5.15a.5.5 0 0 0 .776.417l4-2.649a.5.5 0 0 0-.01-.84l-4-2.502zM4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h11a2.5 2.5 0 0 0 2.5-2.5v-9A2.5 2.5 0 0 0 15.5 3h-11zM3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9z"
                            fill="currentColor"></path>
                        </g>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="2">
                    <el-icon>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 640 512">
                        <path
                          d="M608 0H160a32 32 0 0 0-32 32v96h160V64h192v320h128a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zM232 103a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm352 208a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm-168 57H32a32 32 0 0 0-32 32v288a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V192a32 32 0 0 0-32-32zM96 224a32 32 0 1 1-32 32a32 32 0 0 1 32-32zm288 224H64v-32l64-64l32 32l128-128l96 96z"
                          fill="currentColor"></path>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="3">
                    <el-icon>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 24 24">
                        <path d="M22 18V2H6v16h16zm-11-6l2.03 2.71L16 11l4 5H8l3-4zM2 6v16h16v-2H4V6H2z"
                          fill="currentColor">
                        </path>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="4">
                    <el-icon>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 20 20">
                        <g fill="none">
                          <path
                            d="M6.5 10a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H6zm5.5 4h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5z"
                            fill="currentColor"></path>
                        </g>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="5">
                    <el-icon>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 24 24">
                        <g fill="none">
                          <path
                            d="M7.75 11.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5zM7 15.25a.75.75 0 1 1 1.5 0a.75.75 0 0 1-1.5 0zm3-3a.75.75 0 0 1 .75-.75h3.054a.75.75 0 0 1 0 1.5H10.75a.75.75 0 0 1-.75-.75zm.75 2.25a.75.75 0 0 0 0 1.5h3.054a.75.75 0 0 0 0-1.5H10.75zM6.25 2A2.25 2.25 0 0 0 4 4.25v13a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25V8.869a2.25 2.25 0 0 0-.659-1.591l-4.619-4.619A2.25 2.25 0 0 0 10.632 2H6.25zM5.5 4.25a.75.75 0 0 1 .75-.75h4.254v3.248a2.25 2.25 0 0 0 2.25 2.25H16v8.252a.75.75 0 0 1-.75.75h-9a.75.75 0 0 1-.75-.75v-13zm6.504 2.498V4.562l2.935 2.936h-2.185a.75.75 0 0 1-.75-.75zM8.75 22a2.25 2.25 0 0 1-2.122-1.5h8.622a3.25 3.25 0 0 0 3.25-3.25V8.937l.84.84c.423.423.66.995.66 1.592v5.881A4.75 4.75 0 0 1 15.25 22h-6.5z"
                            fill="currentColor"></path>
                        </g>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="6">
                    <el-icon>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 512 512">
                        <path
                          d="M83 384c-13-33-35-93.37-35-128C48 141.12 149.33 48 256 48s208 93.12 208 208c0 34.63-23 97-35 128"
                          fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                          stroke-width="32">
                        </path>
                        <path
                          d="M108.39 270.13l-13.69 8h0c-30.23 17.7-31.7 72.41-3.38 122.2s75.87 75.81 106.1 58.12h0l13.69-8a16.16 16.16 0 0 0 5.78-21.87L130 276a15.74 15.74 0 0 0-21.61-5.87z"
                          fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32">
                        </path>
                        <path
                          d="M403.61 270.13l13.69 8h0c30.23 17.69 31.74 72.4 3.38 122.19s-75.87 75.81-106.1 58.12h0l-13.69-8a16.16 16.16 0 0 1-5.78-21.87L382 276a15.74 15.74 0 0 1 21.61-5.87z"
                          fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32">
                        </path>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                </el-radio-group>
              </div>
              <div class="lib-header-search-condition">
                <span class="lib-header-search-condition-label">检索算法:</span>
                <!-- 
                  直接: 索引搜索(索引名、标签名) 相等 
                  模糊: 遍历搜索(索引名、标签名、内容) 相似 
                -->
                <el-radio-group v-model="searchTextMode" size="small">
                  <el-radio-button :label="0">直接</el-radio-button>
                  <el-radio-button :label="1">模糊</el-radio-button>
                </el-radio-group>
                &nbsp;
              </div>
            </div>
            <table id="lib-header-search-condition-history" v-show="history.length > 0" border="0" cellspacing="0"
              cellpadding="0">
              <template v-for="(item, index) in history" :key="index">
                <tr class="lib-header-search-condition-history-item-hover lib-header-search-condition-history-item"
                  @click="handleReSearch(item)">
                  <td>
                    <el-icon :size="16">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 24 24">
                        <g fill="none">
                          <path
                            d="M12 3a9 9 0 1 1-8.963 8.183a1 1 0 1 1 1.992.18A6.962 6.962 0 0 0 7.05 16.95c.375.375.792.707 1.242.988A7 7 0 1 0 7.098 7.002l1.4.001a1 1 0 0 1 .116 1.994l-.116.006H4.496a1 1 0 0 1-.993-.883l-.007-.117v-4a1 1 0 0 1 1.994-.116l.006.117v1.774A8.983 8.983 0 0 1 12 3zm-.75 4a.75.75 0 0 1 .743.648L12 7.75V12h2.25a.75.75 0 0 1 .102 1.493l-.102.007h-3a.75.75 0 0 1-.743-.648l-.007-.102v-5a.75.75 0 0 1 .75-.75z"
                            fill="currentColor"></path>
                        </g>
                      </svg>
                    </el-icon>
                    <span>{{ item.mode === 0 ? '直接' : '模糊' }}</span>
                    -
                    <el-icon v-if="item.type === 0">
                      <DocumentCopy />
                    </el-icon>
                    <el-icon v-else-if="item.type === 1">
                      <Film />
                    </el-icon>
                    <el-icon v-else-if="item.type === 2">
                      <Picture />
                    </el-icon>
                    <el-icon v-else-if="item.type === 3">
                      <Headset />
                    </el-icon>
                    <el-icon v-else-if="item.type === 4">
                      <Document />
                    </el-icon>
                    <el-icon v-else>
                      <Box />
                    </el-icon>
                    -
                    {{ item.key }}
                  </td>
                  <td>
                    {{ item.searchTime }}
                    <el-button @click="handleDeleteHistory(item.id, index)" type="danger" size="small" link>
                      <el-icon :size="16">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                          viewBox="0 0 24 24">
                          <path
                            d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
                            fill="currentColor"></path>
                        </svg>
                      </el-icon>
                    </el-button>
                  </td>
                </tr>
              </template>
              <tr>
                <td>
                  <el-button @click="handleClearHistory" size="small" link>
                    清空搜索记录
                  </el-button>
                </td>
              </tr>
            </table>
          </div>
        </n-card>
      </n-modal>
    </div>
    <div id="lib-index-main" :style="`height: ${mainHeight}px;`">
      <div id="lib-index-aside-menu-box">
        <el-menu id="lib-index-aside-menu" :default-active="activeIndex" @select="menuSelect" collapse>
          <el-menu-item class="lib-index-aside-menu-item lib-index-aside-menu-item-hover" index="0">
            <el-icon :size="30">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
                <path
                  d="M261.56 101.28a8 8 0 0 0-11.06 0L66.4 277.15a8 8 0 0 0-2.47 5.79L63.9 448a32 32 0 0 0 32 32H192a16 16 0 0 0 16-16V328a8 8 0 0 1 8-8h80a8 8 0 0 1 8 8v136a16 16 0 0 0 16 16h96.06a32 32 0 0 0 32-32V282.94a8 8 0 0 0-2.47-5.79z"
                  fill="currentColor"></path>
                <path
                  d="M490.91 244.15l-74.8-71.56V64a16 16 0 0 0-16-16h-48a16 16 0 0 0-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0 0 43 267.56L250.5 69.28a8 8 0 0 1 11.06 0l207.52 198.28a16 16 0 0 0 22.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"
                  fill="currentColor"></path>
              </svg>
            </el-icon>
            <template #title>概述</template>
          </el-menu-item>
          <el-menu-item class="lib-index-aside-menu-item lib-index-aside-menu-item-hover"
            :disabled="searchViewMap.size === 0" index="1">
            <el-icon :size="30">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <g fill="none">
                  <path
                    d="M13.7 2.33a3.75 3.75 0 0 1 2.6 0l4.307 1.592a1.75 1.75 0 0 1 1.143 1.641v9.292a5.503 5.503 0 0 0-5.63-3.843a2.745 2.745 0 0 0-1.167-.829l-4.306-1.592a4.75 4.75 0 0 0-2.397-.235V5.563a1.75 1.75 0 0 1 1.143-1.641L13.7 2.33zm-2.395 3.924a.75.75 0 0 0 .464.954l2.659.919c.37.128.774.128 1.144 0l2.65-.919a.75.75 0 0 0-.49-1.417l-2.65.918a.25.25 0 0 1-.164 0l-2.659-.919a.75.75 0 0 0-.954.464zm3.566 4.99a1.744 1.744 0 0 0-.264-.123L10.3 9.529a3.75 3.75 0 0 0-2.6 0l-4.307 1.592a1.75 1.75 0 0 0-1.143 1.641v5.67a1.75 1.75 0 0 0 1.143 1.642L7.7 21.666c.839.31 1.761.31 2.6 0l2.639-.976A5.488 5.488 0 0 1 11 16.5c0-.512.07-1.007.2-1.478l-1.45.503v2.7a.75.75 0 0 1-1.5 0v-2.7l-2.48-.857a.75.75 0 0 1 .49-1.418l2.74.948l2.732-.947c.118-.041.24-.05.355-.034a5.51 5.51 0 0 1 2.784-1.972zm5.297 7.862a4.5 4.5 0 1 0-1.06 1.06l2.612 2.613a.75.75 0 0 0 1.06-1.06l-2.612-2.613zM19.5 16.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0z"
                    fill="currentColor"></path>
                </g>
              </svg>
            </el-icon>
            <template #title>搜索</template>
          </el-menu-item>
          <el-menu-item class="lib-index-aside-menu-item lib-index-aside-menu-item-hover"
            :disabled="contentViewMap.size === 0" index="2">
            <el-icon :size="30">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <path
                  d="M13 12h7v1.5h-7zm0-2.5h7V11h-7zm0 5h7V16h-7zM21 4H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15h-9V6h9v13z"
                  fill="currentColor"></path>
              </svg>
            </el-icon>
            <template #title>浏览</template>
          </el-menu-item>
          <div id="lib-index-aside-menu-item-last">
            <el-menu-item class="lib-index-aside-menu-item lib-index-aside-menu-item-hover " index="4">
              <el-icon :size="30">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48">
                  <g fill="none">
                    <path
                      d="M24 16.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 0 0 0-15zM19 24a5 5 0 1 1 10 0a5 5 0 0 1-10 0zm.494 19.468c1.479.353 2.993.531 4.513.531a19.425 19.425 0 0 0 4.503-.534a1.94 1.94 0 0 0 1.474-1.672l.338-3.071a2.318 2.318 0 0 1 2.183-2.075c.367-.016.732.053 1.068.2l2.807 1.231a1.922 1.922 0 0 0 1.554.01c.247-.105.468-.261.65-.458a20.372 20.372 0 0 0 4.51-7.779a1.942 1.942 0 0 0-.7-2.133l-2.494-1.84a2.326 2.326 0 0 1 0-3.764l2.486-1.836a1.943 1.943 0 0 0 .7-2.138a20.325 20.325 0 0 0-4.515-7.777a1.936 1.936 0 0 0-2.192-.45l-2.806 1.236c-.29.131-.606.2-.926.2a2.338 2.338 0 0 1-2.32-2.088l-.34-3.06a1.937 1.937 0 0 0-1.5-1.681a21.663 21.663 0 0 0-4.469-.519a21.922 21.922 0 0 0-4.5.52a1.935 1.935 0 0 0-1.5 1.677l-.34 3.062a2.345 2.345 0 0 1-.768 1.488c-.439.373-.993.585-1.569.6a2.3 2.3 0 0 1-.923-.194l-2.8-1.236a1.937 1.937 0 0 0-2.2.452a20.354 20.354 0 0 0-4.51 7.775a1.941 1.941 0 0 0 .7 2.137l2.488 1.836a2.344 2.344 0 0 1 .701 2.938a2.338 2.338 0 0 1-.7.829l-2.49 1.839a1.94 1.94 0 0 0-.7 2.135a20.333 20.333 0 0 0 4.51 7.782a1.929 1.929 0 0 0 2.193.454l2.818-1.237c.291-.128.605-.194.923-.194h.008a2.338 2.338 0 0 1 2.32 2.074l.338 3.057a1.94 1.94 0 0 0 1.477 1.673zm8.064-2.345c-2.34.5-4.76.5-7.1 0l-.304-2.662a4.838 4.838 0 0 0-4.8-4.3h-.01a4.743 4.743 0 0 0-1.926.4l-2.446 1.073a17.84 17.84 0 0 1-3.56-6.147l2.165-1.6a4.84 4.84 0 0 0 0-7.791l-2.164-1.6a17.852 17.852 0 0 1 3.561-6.14l2.432 1.072c.608.27 1.266.408 1.931.407h.01a4.85 4.85 0 0 0 4.81-4.312l.3-2.66a19.369 19.369 0 0 1 3.562-.376c1.187.015 2.37.14 3.534.375l.3 2.659a4.835 4.835 0 0 0 4.8 4.314a4.338 4.338 0 0 0 1.946-.41l2.43-1.071a17.83 17.83 0 0 1 3.562 6.141l-2.157 1.593a4.826 4.826 0 0 0 0 7.8l2.165 1.6a17.881 17.881 0 0 1-3.56 6.14l-2.44-1.07a4.82 4.82 0 0 0-6.748 3.9l-.293 2.665z"
                      fill="currentColor"></path>
                  </g>
                </svg>
              </el-icon>
              <template #title>设置</template>
            </el-menu-item>
          </div>
        </el-menu>
      </div>
      <div style="width: 100%;">
        <div v-show="tabsRouteSet.has(this.$route.fullPath)" ref="refLibIndexTabs" id="lib-index-main-tabs"
          @contextmenu="handleTabsContextMenu">
          <div class="lib-index-main-tabs-prefix" style="width: 74px;">
            <div class="lib-index-main-tabs-prefix-scrollx-button-group">
              <el-button type="info" size="small" link @click="handleTabRefresh">
                <el-icon :size="20">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <path
                      d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
                      fill="currentColor"></path>
                  </svg>
                </el-icon>
              </el-button>
              <el-button type="primary" @click="handleTabAreaScrollLeft" size="small" link>
                <el-icon :size="24">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <path d="M14 7l-5 5l5 5V7z" fill="currentColor"></path>
                  </svg>
                </el-icon>
              </el-button>
              <el-button type="primary" @click="handleTabAreaScrollRight" size="small" link>
                <el-icon :size="24">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <path d="M10 17l5-5l-5-5v10z" fill="currentColor"></path>
                  </svg>
                </el-icon>
              </el-button>
            </div>
          </div>
          <div class="lib-index-main-tabs-tabarea" :style="`width: ${tabAreaWidth}px;`">
            <template v-for="(entry, index) in currentViewMap.entries()" :key="index">
              <div @click="handleTabSwitch(entry)"
                :class="[entry[0] === currentViewKey ? 'lib-index-main-tabs-tab-active' : 'lib-index-main-tabs-tab-unactive', 'lib-index-main-tabs-tab']">
                <el-icon v-if="entry[1].constructor.name === ListView.name" :size="20"
                  class="lib-index-main-tabs-tab-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
                    <g fill="none">
                      <path
                        d="M10 8c3.314 0 6-1.343 6-3s-2.686-3-6-3s-6 1.343-6 3s2.686 3 6 3zm4.69.016c.47-.235.927-.534 1.31-.896v2.638a4.5 4.5 0 1 0-3.835 8.04c-.671.13-1.402.202-2.165.202c-3.314 0-6-1.343-6-3V7.12c.383.362.84.661 1.31.896C6.562 8.642 8.222 9 10 9c1.778 0 3.438-.358 4.69-.984zM13.5 17c.786 0 1.512-.26 2.096-.697l2.55 2.55a.5.5 0 1 0 .708-.707l-2.55-2.55A3.5 3.5 0 1 0 13.5 17zm0-1a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                </el-icon>
                <el-icon v-else :size="15" class="lib-index-main-tabs-tab-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 192 512">
                    <path
                      d="M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72s72-32.235 72-72S135.764 0 96 0z"
                      fill="currentColor"></path>
                  </svg>
                </el-icon>
                <span class="lib-index-main-tabs-tab-title">{{ entry[0] }}</span>
                <el-icon @click="handleTabClose(entry, $event)" :size="16"
                  :class="[entry[0] === currentViewKey ? 'lib-index-main-tabs-tab-active-close-icon' : 'lib-index-main-tabs-tab-unactive-close-icon', 'lib-index-main-tabs-tab--close-icon']">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 512 512">
                    <path
                      d="M289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34z"
                      fill="currentColor"></path>
                  </svg>
                </el-icon>
              </div>
            </template>
          </div>
          <div class="lib-index-main-tabs-suffix" style="width: 32px;">
            <div class="lib-index-main-tabs-suffix-button-group">
              <el-button v-show="currentView.constructor.name === ListView.name" size="small" type="primary" link
                @click="handleTabsViewMode">
                <el-icon v-if="currentView.viewMode" :size="20">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
                    <path d="M6 6h20v2H6z" fill="currentColor"></path>
                    <path d="M6 12h20v2H6z" fill="currentColor"></path>
                    <path d="M6 18h20v2H6z" fill="currentColor"></path>
                    <path d="M6 24h20v2H6z" fill="currentColor"></path>
                  </svg>
                </el-icon>
                <el-icon v-else :size="20">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <path d="M3 3h8v8H3zm0 10h8v8H3zM13 3h8v8h-8zm0 10h8v8h-8z" fill="currentColor"></path>
                  </svg>
                </el-icon>
              </el-button>
              <el-button v-show="currentView.constructor.name === PictureContentView.name" size="small" type="primary"
                link @click="handleTabsViewMode">
                <el-icon v-if="currentView.viewMode" :size="20">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <path d="M16 20H2V4h14v16zm2-12h4V4h-4v4zm0 12h4v-4h-4v4zm0-6h4v-4h-4v4z" fill="currentColor"></path>
                  </svg>
                </el-icon>
                <el-icon v-else :size="20">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 512 512">
                    <path
                      d="M149.333 216v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-80c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zM125.333 32H24C10.745 32 0 42.745 0 56v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24zm80 448H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm-24-424v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24zm24 264H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24z"
                      fill="currentColor"></path>
                  </svg>
                </el-icon>
              </el-button>
            </div>
          </div>
        </div>
        <n-dropdown placement="bottom-start" size="small" trigger="manual" :x="x" :y="y" :options="tabMenu"
          :show="showDropdown" :on-clickoutside="onClickoutside" @select=" showDropdown = false" />
        <router-view :metaInfoView="metaInfoView" :pictureContentView="pictureContentView"
          :textContentView="textContentView" :resultView="resultView" @set:filter="handleSetViewFilter"
          @text-detail:patch:description="handleTextContentPatchDescription" @open:meta="handleOpenMeta"
          @patch:index="handleIndexPatch" @post:index:author="handleAuthorPost" @delete:index:author="handleAuthorDelete"
          @post:index:tag="handleTagPost" @delete:index:tag="handleTagDelete" @post:index:file="handleFilePost"
          @delete:index:file="handleFileDelete" @batchDelete:index:file="handleFileBatchDelete"
          @post:index:cover="handleCoverPost" @delete:index:cover="handleCoverDelete"
          @batchDelete:index:cover="handleCoverBatchDelete" @post:index:subindex="handleSubindexPost"
          @delete:index:subindex="handleSubindexDelete" @batchDelete:index:subindex="handleSubindexBatchDelete"
          @read:index="handleIndexRead" @delete:index="handleIndexDelete" @add:favorite="handleFavoriteAdd"
          @delete:favorite="handleFavoriteDelete" />
      </div>
    </div>
    <footer id="lib-index-footer">
      <el-button class="lib-index-footer-button" type="primary" size="small" @click="handleErrorClear">
        <el-icon :size="16">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
            <path
              d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4l-66.1-.3c-4.4 0-8 3.5-8 8c0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4l66 .3c4.4 0 8-3.5 8-8c0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
              fill="currentColor" />
            <path
              d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448s448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372z"
              fill="currentColor" />
          </svg>
        </el-icon>
        &thinsp;
        {{ errorSize }}
      </el-button>
      <div id="lib-index-footer-right">
        <template v-if="currentView.constructor.name === ListView.name">
          <div class="lib-index-footer-text lib-index-footer-text-hover">
            总计&nbsp;{{ currentView.total }}&nbsp;,&nbsp;筛选{{ currentView.data.length }}
          </div>
          <div class="lib-index-footer-text lib-index-footer-text-hover">{{ indexType[currentView.type] }}</div>
          <div class="lib-index-footer-text lib-index-footer-text-hover">{{ currentView.mode === 0 ? '混合' : '直接' }}</div>
        </template>
        <template v-else-if="currentView.constructor.name === MetaView.name">
          <div class="lib-index-footer-text lib-index-footer-text-hover">文件&nbsp;{{ currentView.fileList.length }}</div>
          <div class="lib-index-footer-text lib-index-footer-text-hover">子索引&nbsp;{{ currentView.subindexList.length }}
          </div>
          <div class="lib-index-footer-text lib-index-footer-text-hover">封面&nbsp;{{ currentView.coverList.length }}</div>
        </template>
        <template v-else-if="currentView.constructor.name === TextContentView.name">
          <template v-if="currentView.subindexList.length > 0">
            <div class="lib-index-footer-text lib-index-footer-text-hover">
              &nbsp;{{ textContentView.authorList.map(a => a.label) }}&nbsp;著</div>
            <div class="lib-index-footer-text lib-index-footer-text-hover">
              共&nbsp;{{ textContentView.subindexList.length }}&nbsp;篇</div>
            <div class="lib-index-footer-text lib-index-footer-text-hover">
              第&nbsp;{{ Number(textContentView.currentSection) + 1 }}&nbsp;篇</div>
            <div class="lib-index-footer-text lib-index-footer-text-hover">字数&nbsp;
              {{ textContentView.subindexList[Number(textContentView.currentSection)].description.length }}
            </div>
          </template>
          <template v-else>
            <div class="lib-index-footer-text lib-index-footer-text-hover">
              &nbsp;{{ textContentView.authorList.map(a => a.label) }}&nbsp;著</div>
            <div class="lib-index-footer-text lib-index-footer-text-hover">
              共&nbsp;1&nbsp;篇</div>
            <div class="lib-index-footer-text lib-index-footer-text-hover">
              第&nbsp;1&nbsp;篇</div>
            <div class="lib-index-footer-text lib-index-footer-text-hover">字数&nbsp;
              {{ textContentView.index.description.length }}
            </div>
          </template>
        </template>
        <el-button :class="errorWarning === false ? 'lib-index-footer-button' : 'lib-index-footer-button-alert'"
          size="small" @click="handleMute">
          <el-icon v-if="errorWarning" :size="16">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none">
                <path
                  d="M9.042 19.003h5.916a3 3 0 0 1-5.916 0zm2.958-17a7.5 7.5 0 0 1 7.5 7.5v4l1.418 3.16A.95.95 0 0 1 20.052 18h-16.1a.95.95 0 0 1-.867-1.338l1.415-3.16V9.49l.005-.25A7.5 7.5 0 0 1 12 2.004zM23 8.25a.75.75 0 0 1 .102 1.493L23 9.75h-2a.75.75 0 0 1-.102-1.493L21 8.25h2zm-20 0a.75.75 0 0 1 .102 1.493L3 9.75H1a.75.75 0 0 1-.102-1.493L1 8.25h2zm19.6-5.7a.75.75 0 0 1-.066.977l-.084.073l-2 1.5a.75.75 0 0 1-.984-1.127l.084-.073l2-1.5a.75.75 0 0 1 1.05.15zM2.45 2.4l2 1.5a.75.75 0 1 1-.9 1.2l-2-1.5a.75.75 0 1 1 .9-1.2z"
                  fill="currentColor" />
              </g>
            </svg>
          </el-icon>
          <el-icon v-else :size="16">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none">
                <path
                  d="M9.042 19.003h5.916a3 3 0 0 1-5.916 0zm2.958-17a7.5 7.5 0 0 1 7.5 7.5v4l1.418 3.16A.95.95 0 0 1 20.052 18h-16.1a.95.95 0 0 1-.867-1.338l1.415-3.16V9.49l.005-.25A7.5 7.5 0 0 1 12 2.004z"
                  fill="currentColor" />
              </g>
            </svg>
          </el-icon>
        </el-button>
      </div>
    </footer>
  </div>
</template>
  
<script>
import { ListView, MetaView, ResultEmptyView, TextContentView, PictureContentView, NoneView, indexType } from './index.js'
import { mapMutations, mapActions, mapState } from "vuex"
const tabsRouteSet = new Set([
  '/search_text_result',
  '/search_picture_result',
  '/meta_info',
  '/content_empty',
  '/result_empty',
  '/picture_list_detail',
  '/picture_preview_detail',
  '/text_detail'
])
export default {
  beforeCreate() {
    window.electronAPI.windowBlur((_event, value) => {
      if (value === 0) this.windowIsFocus = 0
    })
    window.electronAPI.windowFocus((_event, value) => {
      if (value === 1) this.windowIsFocus = 1
    })
    window.onbeforeunload = () => {
      $MyLibWindowCommunication.close()
    }
  },
  created() {
    $MyLibDbc.search_history.getAll().then(res => this.history = res)
    ResultEmptyView.defaultView = new ResultEmptyView(this.handleEmptyTabSwitch, this.handleSearchTabClose)
  },
  beforeMount() {
    this.$nextTick(() => {
      /* main--start */
      this.mainHeight = document.body.offsetHeight - 34 - 24
      /* main--end */
      /* tab--start */
      const refLibIndexTabsTabArea = this.$refs.refLibIndexTabs.children[1]
      this.refLibIndexTabsTabArea = this.$refs.refLibIndexTabs.children[1]
      this.scrollMove = refLibIndexTabsTabArea.scrollWidth / refLibIndexTabsTabArea.childElementCount
      this.tabAreaWidth = document.body.clientWidth - 74 - 32 - 48
      /* tab--end */
      window.addEventListener('resize', () => {
        /* tab--start */
        this.scrollMove = refLibIndexTabsTabArea.scrollWidth / refLibIndexTabsTabArea.childElementCount
        this.tabAreaWidth = document.body.clientWidth - 74 - 32 - 48
        /* tab--end */
        /* main--start */
        this.mainHeight = document.body.offsetHeight - 34 - 24
        /* main--end */
      })
    })
  },
  mounted() {/**/ },
  computed: {
    ...mapState({
      errorSize: state => state.errorList.length,
      errorWarning: state => state.warning
    })
  },
  methods: {
    ...mapActions(['aspect']),
    ...mapMutations(['aspectSync', 'allClear', 'clear']),
    /* text-detail-start */
    handleTextContentPatchDescription() {
      this.aspect(async () => {
        if (this.textContentView.subindexList > 0) {
          const e = this.textContentView.subindexList[Number(this.textContentView.currentSection)]
          e.description = this.textContentView.textarea
          await $MyLibDbc.index.put(e)
        } else {
          const e = this.textContentView.index
          e.description = this.textContentView.textarea
          await $MyLibDbc.index.put(e)
        }
      }, '修改索引描述···')
    },
    /* text-detail-end */
    /** search-text-result-view */
    handleSetViewFilter(event) {
      this.aspectSync(() => {
        this.currentView.page = this.currentView.filter.reorder(event.type, event.conditions, this.currentView.data)
      }, '重新排序···')
    },
    /* meta--start */
    handleIndexDelete() {
      this.aspect(async () => {
        this.metaInfoView.index.state = 0
        await $MyLibDbc.index.put(this.metaInfoView.index)
      }, '删除索引···')
    },
    handleFavoriteAdd() {
      this.aspect(async () => {
        const favorite = new FavoriteEntity(this.metaInfoView.index.id, new Date().toLocaleString())
        await $MyLibDbc.favorite.insert(favorite)
        this.metaInfoView.favorite = favorite
      }, '添加收藏记录···')
    },
    handleFavoriteDelete() {
      this.aspect(async () => {
        await $MyLibDbc.favorite.remove(this.metaInfoView.favorite.id)
        delete this.metaInfoView.favorite
      }, '删除收藏记录···')
    },
    handleIndexRead() {
      this.aspectSync(() => {
        this.currentViewMap = this.contentViewMap
        this.contentViewKey = this.currentViewKey
        this.activeIndex = '2'
        let view = this.contentViewMap.get(this.contentViewKey)
        if (view) {
          this.currentView = this.contentView = view
          this.$router.replace({ path: this.contentView.path })
        } else {
          switch (this.currentView.index.type) {
            case 3:
              this.pictureContentView = this.currentView = this.contentView = PictureContentView.newInstanceByMetaView(this.currentView, this.viewMode, this.handleTextContentTabSwitch, this.handleContentTabClose)
              this.contentViewMap.set(this.currentViewKey, this.contentView)
              this.$router.replace({ path: this.currentView.path })
              break;
            case 4:
            case 5:
              this.textContentView = this.currentView = this.contentView = TextContentView.newInstanceByMetaView(this.currentView, this.handleTextContentTabSwitch, this.handleContentTabClose)
              this.contentViewMap.set(this.currentViewKey, this.contentView)
              this.$router.replace({ path: this.currentView.path })
              break;
          }
        }
        this.scrollMove = this.refLibIndexTabsTabArea.scrollWidth / this.refLibIndexTabsTabArea.childElementCount
      }, '读取索引内容···')
    },
    handleIndexPatch(event) {
      this.aspect(async () => {
        this.metaInfoView.index[event.field] = event.val
        await $MyLibDbc.index.put(this.metaInfoView.index)
      }, '修改索引···')
    },
    handleAuthorPost(event) {
      this.aspect(async () => {
        const tag = await $MyLibDbc.tag.getByIndex('text', event, true)
        const tagId = tag ? tag.id : await $MyLibDbc.tag.insert(new TagEntity(event, 1, 1, new Date().toString()))
        const itid = await $MyLibDbc.index_tag_relationship.insert(new IndexTagRelationship(this.metaInfoView.index.id, tagId))
        this.metaInfoView.authorList.push({ value: itid, label: event })
      }, '提交索引标签···')
    },
    handleAuthorDelete(event) {
      this.aspect(async () => {
        await $MyLibDbc.index_tag_relationship.remove(event.id)
        this.metaInfoView.authorList.splice(event.index, 1)
      }, '删除索引作者···')
    },
    handleTagPost(event) {
      this.aspect(async () => {
        const tag = await $MyLibDbc.tag.getByIndex('text', event, true)
        const tagId = tag ? tag.id : await $MyLibDbc.tag.insert(new TagEntity(event, 1, 0, new Date().toString()))
        const itid = await $MyLibDbc.index_tag_relationship.insert(new IndexTagRelationship(this.metaInfoView.index.id, tagId))
        this.metaInfoView.tagList.push({ value: itid, label: event })
      }, '提交索引标签···')
    },
    handleTagDelete(event) {
      this.aspect(async () => {
        await $MyLibDbc.index_tag_relationship.remove(event.id)
        this.metaInfoView.tagList.splice(event.index, 1)
      }, '删除索引标签···')
    },
    handleFilePost() {
      this.aspect(async () => {
        const params = new Params()
        params.setIsMultiSelections()
        params.setIsOpenFile()
        params.setTitle('选择文件')
        params.finsh()
        const dto = await $Render.getFile(params)

        if (dto.state === 0)
          throw dto.value
        else if (dto.state === 1) {
          const fileList = new Array()
          const newEntityList = new Array()
          const newRelationship = new Array()
          // 剔除已存在文件
          for (const newEntity of dto.value) {
            const value = await $MyLibDbc.file.getByIndex('dirNameExt', [newEntity.dir, newEntity.name, newEntity.ext], true)
            if (value) {
              fileList.push(value)
            } else {
              newEntityList.push(newEntity)
            }
          }
          // 剔除已存在关联
          for (let i = 0; i < fileList.length; i++) {
            const count = await $MyLibDbc.index_file_relationship.countByIndex("indexIdFileId", [this.metaInfoView.index.id, fileList[i].id])
            if (count > 0)
              fileList.splice(i, 1)
            else
              // 添加关联
              newRelationship.push(new IndexFileRelationship(this.metaInfoView.index.id, fileList[i].id))
          }
          // 插入新文件
          const newFileIdlist = await $MyLibDbc.file.batchInsert(newEntityList)

          for (const id of newFileIdlist)
            newRelationship.push(new IndexFileRelationship(this.metaInfoView.index.id, id))
          // 插入关联
          await $MyLibDbc.index_file_relationship.batchInsert(newRelationship)
          // 更新文件列表
          for (const file of fileList) {
            for (let i = 0; i < newRelationship.length; i++) {
              if (file.id === newRelationship[i].fileId) {
                file.ifid = newRelationship[i].id
                this.metaInfoView.index.fileList.push(file)
                newRelationship.splice(i, 1)
                break
              }
            }
          }
          for (const file of newEntityList) {
            for (let i = 0; i < newRelationship.length; i++) {
              if (file.id === newRelationship[i].fileId) {
                file.ifid = newRelationship[i].id
                this.metaInfoView.index.fileList.push(file)
                newRelationship.splice(i, 1)
                break
              }
            }
          }
        }
      }, '提交索引文件···')
    },
    handleFileDelete(event) {
      this.aspect(async () => {
        await $MyLibDbc.index_file_relationship.remove(event.ifid)
        this.metaInfoView.fileList.splice(event.index, 1)
      }, '删除索引文件···')
    },
    handleFileBatchDelete(event) {
      this.aspect(async () => {
        await $MyLibDbc.index_file_relationship.batchRemove(event)
        for (const ifid of event) {
          for (let i = 0; i < this.metaInfoView.fileList.length; i++) {
            if (ifid === this.metaInfoView.fileList[i].ifid) {
              this.metaInfoView.fileList.splice(i, 1)
              break
            }
          }
        }
      }, '批量删除索引文件···')
    },
    handleCoverPost() {
      this.aspect(async () => {
        const params = new Params()
        params.setIsMultiSelections()
        params.setIsOpenFile()
        params.setTitle('选择封面')
        params.setImgFilter()
        params.finsh()

        const dto = await $Render.getFile(params)

        if (dto.state === 0)
          throw dto.value
        else if (dto.state === 1) {
          const fileList = new Array()
          const newEntityList = new Array()
          const newRelationship = new Array()
          // 剔除已存在文件
          for (const newEntity of dto.value) {
            const value = await $MyLibDbc.file.getByIndex('dirNameExt', new Array(newEntity.dir, newEntity.name, newEntity.ext), true)
            if (value) {
              fileList.push(value)
            } else {
              newEntityList.push(newEntity)
            }
          }
          // 剔除已存在关联
          for (let i = 0; i < fileList.length; i++) {
            const count = await $MyLibDbc.index_cover_relationship.countByIndex("indexIdFileId", new Array(this.metaInfoView.index.id, fileList[i].id))
            if (count > 0)
              fileList.splice(i, 1)
            else
              // 添加关联
              newRelationship.push(new IndexFileRelationship(this.metaInfoView.index.id, fileList[i].id))
          }
          // 插入新文件
          const newFileIdlist = await $MyLibDbc.file.batchInsert(newEntityList)

          for (const id of newFileIdlist)
            newRelationship.push(new IndexFileRelationship(this.metaInfoView.index.id, id))
          // 插入关联
          await $MyLibDbc.index_cover_relationship.batchInsert(newRelationship)
          // 更新文件列表
          for (const file of fileList) {
            for (let i = 0; i < newRelationship.length; i++) {
              if (file.id === newRelationship[i].fileId) {
                file.icid = newRelationship[i].id
                file.fullPath = file.dir + '\\' + file.name + file.ext
                this.metaInfoView.coverList.push(file)
                newRelationship.splice(i, 1)
                break
              }
            }
          }
          for (const file of newEntityList) {
            for (let i = 0; i < newRelationship.length; i++) {
              if (file.id === newRelationship[i].fileId) {
                file.icid = newRelationship[i].id
                file.fullPath = file.dir + '\\' + file.name + file.ext
                this.metaInfoView.coverList.push(file)
                newRelationship.splice(i, 1)
                break
              }
            }
          }
        }
      }, '提交索引封面···')
    },
    handleCoverDelete(event) {
      this.aspect(async () => {
        await $MyLibDbc.index_cover_relationship.remove(event.icid)
        this.metaInfoView.coverList.splice(event.index, 1)
      }, '删除索引封面···')
    },
    handleCoverBatchDelete(event) {
      this.aspect(async () => {
        await $MyLibDbc.index_cover_relationship.batchRemove(event)
        for (const icid of event) {
          for (let i = 0; i < this.metaInfoView.coverList.length; i++) {
            if (icid === this.metaInfoView.coverList[i].icid) {

              this.metaInfoView.coverList.splice(i, 1)
              break
            }
          }
        }
      }, '批量删除索引封面···')
    },
    handleSubindexPost() {
      $MyLibWindowCommunication.openWindow(
        'my-lib-index_edit.html',
        `sub_${new Date().getUTCMilliseconds().toString()}`
      ).catch(console.log).then(event => {
        $MyLibDbc.index_subindex_relationship.insert(new IndexSubIndexRelationship(this.metaInfoView.index.id, event.data.id)).then(isid => {
          event.data.isid = isid
          this.metaInfoView.subindexList.push(event.data)
        })
      })
    },
    handleSubindexDelete(event) {
      this.aspect(async () => {
        await $MyLibDbc.index_subindex_relationship.remove(event.isid)
        this.metaInfoView.subindexList.splice(event.index, 1)
      }, '删除关联子索引···')
    },
    handleSubindexBatchDelete(event) {
      this.aspect(async () => {
        await $MyLibDbc.index_subindex_relationship.batchRemove(event)
        for (const isid of event) {
          for (let i = 0; i < this.metaInfoView.subindexList.length; i++) {
            if (isid === this.metaInfoView.subindexList[i].isid) {
              this.metaInfoView.subindexList.splice(i, 1)
              break
            }
          }
        }
      }, '批量删除关联子索引···')
    },
    /* meta--end */
    /* tab--start */
    handleTabRefresh() {
      this.aspect(() => {
        if (this.currentView instanceof ListView) {
          this.searchTextMode = this.currentView.mode
          this.searchType = this.currentView.type
          this.searchInput = this.currentView.searchStr
          this.viewMode = this.currentView.viewMode
          return this.handleSearch()
        } else if (this.currentView instanceof MetaView) {
          return this.handleOpenMeta(this.currentView.index.id)
        } else
          throw Error('刷新异常')
      })
    },
    handleMetaTabSwitch(key, view) {
      this.metaInfoView = this.searchView = this.currentView = view
      this.searchViewKey = this.currentViewKey = key

      this.searchViewIndex = this.currentViewIndex = key
      this.$router.replace({ path: view.path })
    },
    handleResultTabSwitch(key, view) {
      this.resultView = this.searchView = this.currentView = view
      this.searchViewKey = this.currentViewKey = key

      this.searchViewIndex = this.currentViewIndex = key
      this.$router.replace({ path: view.path })
    },
    handleEmptyTabSwitch(key, view) {
      this.searchView = this.currentView = view
      this.searchViewKey = this.currentViewKey = key

      this.searchViewIndex = this.currentViewIndex = key
      this.$router.replace({ path: view.path })
    },
    handlePictureContentTabSwitch(key, view) {
      this.pictureContentView = this.contentView = this.currentView = view
      this.contentViewKey = this.currentViewKey = key

      this.contentViewIndex = this.currentViewIndex = key
      this.$router.replace({ path: view.path })
    },
    handleTextContentTabSwitch(key, view) {
      this.textContentView = this.contentView = this.currentView = view
      this.contentViewKey = this.currentViewKey = key

      this.contentViewIndex = this.currentViewIndex = key
      this.$router.replace({ path: view.path })
    },
    handleTabSwitch(entry) {
      entry[1].handleTabSwitch(entry[0], entry[1])
    },
    handleSearchTabClose(key) {
      if (this.currentViewMap.size > 1) {
        if (this.currentViewKey === key) {
          const iterator = this.currentViewMap.entries()
          let next = iterator.next()
          while (next.done === false) {
            if (key !== next.value[0]) {
              this.currentViewMap.delete(key)
              this.searchView = this.currentView = next.value[1]
              this.searchViewKey = this.currentViewKey = next.value[0]
              this.$router.replace({ path: this.searchView.path })
              break
            }
            next = iterator.next()
          }
        } else
          this.currentViewMap.delete(key)
      } else {
        this.currentViewMap.delete(key)
        this.searchView = this.currentView = NoneView.defaultView
        this.searchViewKey = this.currentViewKey = ''
        if (this.contentViewMap.size > 0)
          this.menuSelect("2")
        else
          this.menuSelect("0")
      }
    },
    handleContentTabClose(key) {
      if (this.currentViewMap.size > 1) {
        if (this.currentViewKey === key) {
          const iterator = this.currentViewMap.entries()
          let next = iterator.next()
          while (next.done === false) {
            if (key !== next.value[0]) {
              this.currentViewMap.delete(key)
              this.contentViewKey = this.currentViewKey = next.value[0]
              this.contentView = this.currentView = next.value[1]
              this.$router.replace({ path: this.contentView.path })
              break
            }
            next = iterator.next()
          }
        } else
          this.currentViewMap.delete(key)
      } else {
        this.currentViewMap.delete(key)
        this.searchView = this.currentView = NoneView.defaultView
        this.searchViewKey = this.currentViewKey = ''
        if (this.searchViewMap.size > 0)
          this.menuSelect("1")
        else
          this.menuSelect("0")
      }
    },
    handleTabClose(entry, event) {
      event.preventDefault()
      event.stopPropagation()
      entry[1].handleTabClose(entry[0])
    },
    handleTabAreaScrollRight() {
      this.refLibIndexTabsTabArea.scrollBy({ left: this.scrollMove })
    },
    handleTabAreaScrollLeft() {
      this.refLibIndexTabsTabArea.scrollBy({ left: this.scrollMove * -1 })
    },
    handleTabsViewMode() {
      this.viewMode = !this.currentView.viewMode
      this.currentView.patchViewMode(this.viewMode)
      this.$router.replace({ path: this.currentView.path })
    },
    /*右键菜单开始*/
    handleTabsContextMenu(e) {
      e.preventDefault()
      this.showDropdownRef = false
      this.$nextTick().then(() => {
        this.showDropdown = true
        this.x = e.clientX
        this.y = e.clientY
      })
    },
    tabMenuhandleSelect() {
      this.showDropdown = false
    },
    onClickoutside() {
      this.showDropdown = false
    },
    /*右键菜单结束 */
    /* tab--end */

    /* header--start */
    handleSearchButton() {
      this.inputVisiable = true
      this.searchButtonVisiable = false
    },
    handleOpenIndexEdit() {
      $MyLibWindowCommunication.openWindow(
        'my-lib-index_edit.html',
        `root_${new Date().getUTCMilliseconds().toString()}`
      )
    },
    handleOpenFavorite() {
      $MyLibWindowCommunication.openWindowAndSession(
        'my-lib-favorite.html',
        'favorite',
        (windowInstance, event) => {
          //this.subindexMap.set(event.data.id, event.data)
          switch (event.data.handle) {
            case 0:
              return true
            case 1:
              //openMeta
              this.handleOpenMeta(event.data.indexId)
              break
            case 2:
              //batchOpenMeta
              this.handleBatchOpenMeta(event.data.indexIds)
              break
            case 3:
              //read
              this.handleFavoriteRead(event.data.indexId)
              break
            case 4:
              //batchRead
              this.handleFavoriteBatchRead(event.data.indexIds)
              break
            case 5:
              delete this.searchViewMap.get('元信息:' + event.data.title).favorite
          }
        }
      )
    },
    handleSearch() {
      this.aspect(async () => {
        this.inputVisiable = false
        const querySet = new Set(this.searchInput.split(' '))
        querySet.delete('')
        const historyRecord = new SearchHistoryEntity(this.searchInput, this.searchType, this.searchTextMode, new Date().toLocaleString())
        await $MyLibDbc.search_history.insert(historyRecord)
        this.history.unshift(historyRecord)

        const val = await this.$search.searchRoute(this.searchTextMode, this.searchType, querySet)
        const key = '搜索:' + this.searchInput
        this.activeIndex = '1'
        this.searchViewKey = this.currentViewKey = key
        this.currentViewMap = this.searchViewMap
        switch (val.code) {
          case 1:
            this.resultView = this.searchView = this.currentView = new ListView(val.result, val.result, this.viewMode, this.handleResultTabSwitch, this.handleSearchTabClose, this.searchType, this.searchTextMode, this.searchInput)
            this.searchViewMap.set(key, this.searchView)
            this.scrollMove = this.refLibIndexTabsTabArea.scrollWidth / this.refLibIndexTabsTabArea.childElementCount
            break
          case 2:
          case 3:
            this.searchView = this.currentView = new ResultEmptyView(this.handleEmptyTabSwitch, this.handleSearchTabClose, this.searchType, this.searchTextMode)
            this.searchViewMap.set(key, this.searchView)
            this.scrollMove = this.refLibIndexTabsTabArea.scrollWidth / this.refLibIndexTabsTabArea.childElementCount
            break
        }
        this.$router.replace({ path: this.currentView.path })
      }, '检索中···')

    },
    handleOpenTagManagement() {
      $MyLibWindowCommunication.openWindow(
        'my-lib-tag_management.html',
        'tagManagement'
      )
    },
    handleOpenReview() {
      $MyLibWindowCommunication.openWindow(
        'my-lib-review.html',
        'review'
      )
    },
    handleReSearch(event) {
      this.searchInput = event.key
      this.searchType = event.type
      this.searchTextMode = event.mode
      this.handleSearch()
    },
    handleClearHistory() {
      this.aspect(async () => {
        await $MyLibDbc.search_history.batchRemove(this.history.map(e => e.id))
        this.history = new Array()
      }, '清空搜索历史记录···')
    },
    handleDeleteHistory(id, index) {
      this.aspect(async () => {
        await $MyLibDbc.search_history.remove(id)
        this.history.splice(index, 1)
      }, '删除收藏记录···')
    },
    /* header--end */
    /* aside--start */
    menuSelect(index) {
      this.aspectSync(() => {
        this.activeIndex = index
        switch (Number(index)) {
          case 0:
            this.$router.replace({ path: '/overview' })
            break;
          case 1:
            this.currentViewMap = this.searchViewMap
            if (this.searchViewKey === '' || !this.searchViewKey) {
              const iteratorResult = this.searchViewMap.entries().next()
              if (iteratorResult.done)
                this.menuSelect(this.contentViewMap.size > 0 ? "2" : "0")
              else
                iteratorResult.value[1].handleTabSwitch(iteratorResult.value[0], iteratorResult.value[1])
            } else
              this.searchView.handleTabSwitch(this.searchViewKey, this.searchView)
            this.scrollMove = this.refLibIndexTabsTabArea.scrollWidth / this.refLibIndexTabsTabArea.childElementCount
            break
          case 2:
            this.currentViewMap = this.contentViewMap
            if (this.contentViewKey === '' || !this.contentViewKey) {
              const iteratorResult = this.contentViewMap.entries().next()
              if (iteratorResult.done)
                this.menuSelect(this.searchViewMap.size > 0 ? "1" : "0")
              else
                iteratorResult.value[1].handleTabSwitch(iteratorResult.value[0], iteratorResult.value[1])
            } else
              this.contentView.handleTabSwitch(this.contentViewKey, this.contentView)
            this.scrollMove = this.refLibIndexTabsTabArea.scrollWidth / this.refLibIndexTabsTabArea.childElementCount
            break
          case 3:
            this.$router.replace({ path: '/transcation' })
            break
          case 4:
            this.$router.replace({ path: '/setting' })
            break
        }
      }, "菜单子页跳转···")
    },
    /* aside--end */

    /* result--start */
    handleOpenMeta(id) {
      this.aspect(async () => {
        const index = await $MyLibDbc.index.get(id)
        const key = '元信息:' + index.title

        const subindexList = new Array()
        const fileList = new Array()
        const tagList = new Array()
        const authorList = new Array()
        const coverList = new Array()

        const favorite = await $MyLibDbc.favorite.getByIndex("indexId", id, true)
        const itr = await $MyLibDbc.index_tag_relationship.getByIndex("indexId", id)
        const isr = await $MyLibDbc.index_subindex_relationship.getByIndex("indexId", id)
        const ifr = await $MyLibDbc.index_file_relationship.getByIndex("indexId", id)
        const icr = await $MyLibDbc.index_cover_relationship.getByIndex("indexId", id)

        for (const i of itr) {
          const tag = await $MyLibDbc.tag.get(i.tagId)
          tag.type === 0 ? tagList.push({ value: i.id, label: tag.text }) : authorList.push({ value: i.id, label: tag.text })
        }

        if (index.type === 3)
          for (const i of ifr) {
            const file = await $MyLibDbc.file.get(i.fileId)
            file.ifid = i.id
            file.fullPath = file.dir + '\\' + file.name + file.ext
            fileList.push(file)
          }
        else
          for (const i of ifr) {
            const file = await $MyLibDbc.file.get(i.fileId)
            file.ifid = i.id
            fileList.push(file)
          }

        for (const i of icr) {
          const file = await $MyLibDbc.file.get(i.fileId)
          file.icid = i.id
          file.fullPath = file.dir + '\\' + file.name + file.ext
          coverList.push(file)
        }
        for (const i of isr) {
          const subindex = await $MyLibDbc.index.get(i.subIndexId)
          subindex.isid = i.id
          subindexList.push(subindex)
        }


        const view = new MetaView(index, subindexList, fileList, tagList, authorList, coverList, favorite, this.handleMetaTabSwitch, this.handleSearchTabClose)
        view.favorite = favorite

        this.searchViewKey = this.currentViewKey = key
        this.searchView = this.currentView = view
        this.currentViewMap = this.searchViewMap
        this.searchViewMap.set(key, view)
        this.activeIndex = '1'
        this.scrollMove = this.refLibIndexTabsTabArea.scrollWidth / this.refLibIndexTabsTabArea.childElementCount
        this.metaInfoView = view
        this.$router.replace({ path: this.currentView.path })
      }, '打开索引元信息页···')
    },
    handleBatchOpenMeta(ids) {
      this.aspect(async () => {
        const indexList = await $MyLibDbc.index.batchGet(ids)

        for (const index of indexList) {
          const key = '元信息:' + index.title
          const subindexList = new Array()
          const fileList = new Array()
          const tagList = new Array()
          const authorList = new Array()
          const coverList = new Array()

          const favorite = await $MyLibDbc.favorite.getByIndex("indexId", index.id, true)
          const itr = await $MyLibDbc.index_tag_relationship.getByIndex("indexId", index.id)
          const isr = await $MyLibDbc.index_subindex_relationship.getByIndex("indexId", index.id)
          const ifr = await $MyLibDbc.index_file_relationship.getByIndex("indexId", index.id)
          const icr = await $MyLibDbc.index_cover_relationship.getByIndex("indexId", index.id)

          for (const i of itr) {
            const tag = await $MyLibDbc.tag.get(i.tagId)
            tag.type === 0 ? tagList.push({ value: i.id, label: tag.text }) : authorList.push({ value: i.id, label: tag.text })
          }
          if (index.type === 3)
            for (const i of ifr) {
              const file = await $MyLibDbc.file.get(i.fileId)
              file.ifid = i.id
              file.fullPath = file.dir + '\\' + file.name + file.ext
              fileList.push(file)
            }
          else
            for (const i of ifr) {
              const file = await $MyLibDbc.file.get(i.fileId)
              file.ifid = i.id
              fileList.push(file)
            }
          for (const i of icr) {
            const file = await $MyLibDbc.file.get(i.fileId)
            file.icid = i.id
            file.fullPath = file.dir + '\\' + file.name + file.ext
            coverList.push(file)
          }
          for (const i of isr) {
            const subindex = await $MyLibDbc.index.get(i.subIndexId)
            subindex.isid = i.id
            subindexList.push(subindex)
          }

          const view = new MetaView(index, subindexList, fileList, tagList, authorList, coverList, favorite, this.handleMetaTabSwitch, this.handleSearchTabClose)
          this.searchViewKey = this.currentViewKey = key
          this.searchView = this.currentView = view
          this.currentViewMap = this.searchViewMap
          this.searchViewMap.set(key, view)
        }
        this.activeIndex = '1'
        this.scrollMove = this.refLibIndexTabsTabArea.scrollWidth / this.refLibIndexTabsTabArea.childElementCount
        this.$router.replace({ path: this.currentView.path })
      }, "批量打开索引元信息页···")
    },
    handleFavoriteRead(id) {
      this.aspect(async () => {
        const index = await $MyLibDbc.index.get(id)
        const key = '元信息:' + index.title

        const subindexList = new Array()
        const fileList = new Array()
        const tagList = new Array()
        const authorList = new Array()
        const coverList = new Array()

        const favorite = await $MyLibDbc.favorite.getByIndex("indexId", index.id, true)
        const itr = await $MyLibDbc.index_tag_relationship.getByIndex("indexId", id)
        const isr = await $MyLibDbc.index_subindex_relationship.getByIndex("indexId", id)
        const ifr = await $MyLibDbc.index_file_relationship.getByIndex("indexId", id)
        const icr = await $MyLibDbc.index_cover_relationship.getByIndex("indexId", id)

        for (const i of itr) {
          const tag = await $MyLibDbc.tag.get(i.tagId)
          tag.type === 0 ? tagList.push({ value: i.id, label: tag.text }) : authorList.push({ value: i.id, label: tag.text })
        }

        if (index.type === 3)
          for (const i of ifr) {
            const file = await $MyLibDbc.file.get(i.fileId)
            file.ifid = i.id
            file.fullPath = file.dir + '\\' + file.name + file.ext
            fileList.push(file)
          }
        else
          for (const i of ifr) {
            const file = await $MyLibDbc.file.get(i.fileId)
            file.ifid = i.id
            fileList.push(file)
          }

        for (const i of icr) {
          const file = await $MyLibDbc.file.get(i.fileId)
          file.icid = i.id
          file.fullPath = file.dir + '\\' + file.name + file.ext
          coverList.push(file)
        }
        for (const i of isr) {
          const subindex = await $MyLibDbc.index.get(i.subIndexId)
          subindex.isid = i.id
          subindexList.push(subindex)
        }

        switch (index.type) {
          case 3:
            this.currentView = this.pictureContentView = this.contentView = new PictureContentView(index, subindexList, fileList, tagList, authorList, coverList, this.viewMode, 0, favorite, this.handlePictureContentTabSwitch, this.handleContentTabClose)
            break
          case 4:
          case 5:
            this.currentView = this.textContentView = this.contentView = new TextContentView('0', false, false, index, subindexList, fileList, tagList, authorList, coverList, favorite, this.handleTextContentTabSwitch, this.handleContentTabClose)
            break
        }
        this.currentViewKey = this.contentViewKey = key
        this.currentViewMap = this.contentViewMap
        this.contentViewMap.set(key, this.contentView)

        this.scrollMove = this.refLibIndexTabsTabArea.scrollWidth / this.refLibIndexTabsTabArea.childElementCount
        this.activeIndex = '2'
        this.$router.replace({ path: this.currentView.path })
      }, '读取收藏记录···')
    },
    handleFavoriteBatchRead(ids) {
      this.aspect(async () => {
        const indexList = await $MyLibDbc.index.batchGet(ids)
        for (const index of indexList) {
          const key = '元信息:' + index.title
          const subindexList = new Array()
          const fileList = new Array()
          const tagList = new Array()
          const authorList = new Array()
          const coverList = new Array()
          const favorite = await $MyLibDbc.favorite.getByIndex("indexId", index.id, true)
          const itr = await $MyLibDbc.index_tag_relationship.getByIndex("indexId", index.id)
          const isr = await $MyLibDbc.index_subindex_relationship.getByIndex("indexId", index.id)
          const ifr = await $MyLibDbc.index_file_relationship.getByIndex("indexId", index.id)
          const icr = await $MyLibDbc.index_cover_relationship.getByIndex("indexId", index.id)

          for (const i of itr) {
            const tag = await $MyLibDbc.tag.get(i.tagId)
            tag.type === 0 ? tagList.push({ value: i.id, label: tag.text }) : authorList.push({ value: i.id, label: tag.text })
          }
          if (index.type === 3)
            for (const i of ifr) {
              const file = await $MyLibDbc.file.get(i.fileId)
              file.ifid = i.id
              file.fullPath = file.dir + '\\' + file.name + file.ext
              fileList.push(file)
            }
          else
            for (const i of ifr) {
              const file = await $MyLibDbc.file.get(i.fileId)
              file.ifid = i.id
              fileList.push(file)
            }
          for (const i of icr) {
            const file = await $MyLibDbc.file.get(i.fileId)
            file.icid = i.id
            file.fullPath = file.dir + '\\' + file.name + file.ext
            coverList.push(file)
          }
          for (const i of isr) {
            const subindex = await $MyLibDbc.index.get(i.subIndexId)
            subindex.isid = i.id
            subindexList.push(subindex)
          }
          switch (index.type) {
            case 3:
              this.currentView = this.pictureContentView = this.contentView = new PictureContentView(index, subindexList, fileList, tagList, authorList, coverList, this.viewMode, 0, favorite, this.handlePictureContentTabSwitch, this.handleContentTabClose)
              break
            case 4:
            case 5:
              this.currentView = this.textContentView = this.contentView = new TextContentView('0', false, false, index, subindexList, fileList, tagList, authorList, coverList, favorite, this.handleTextContentTabSwitch, this.handleContentTabClose)
              break
          }
          this.currentViewKey = this.contentViewKey = key
          this.currentViewMap = this.contentViewMap
          this.contentViewMap.set(key, this.contentView)
        }
        this.activeIndex = '2'
        this.scrollMove = this.refLibIndexTabsTabArea.scrollWidth / this.refLibIndexTabsTabArea.childElementCount
        this.$router.replace({ path: this.currentView.path })
      }, '批读取收藏记录···')
    },
    /* result--end */
    /* 标签管理器--开始 */
    /* 标签管理器--结束 */
    /** footer--start */
    handleErrorClear() {
      this.clear()
    },
    handleMute() {
      this.allClear()
    }
    /** footer--end */
  },
  data() {
    const searchViewMap = new Map()
    const contentViewMap = new Map()
    return {
      /* header--start */
      searchButtonVisiable: true,
      inputVisiable: false,
      windowIsFocus: 1,
      history: new Array(),
      searchTextMode: 0,
      searchInput: '',
      searchType: 0,

      /* header--end */
      /* main--start*/
      mainHeight: 0,
      /* main--end */
      /* aside--start */
      activeIndex: '0',
      /* aside--end */
      /* tab--start */
      x: 0,
      y: 0,
      showDropdown: false,
      tabMenu: [
        {
          label: '全部关闭',
          key: 0
        }
      ],
      viewMode: false,
      refLibIndexTabsTabArea: {},
      tabAreaWidth: 0,
      scrollMove: 0,
      /* tab--end */

      /* viewData--start */
      currentView: NoneView.defaultView,
      contentView: NoneView.defaultView,
      searchView: NoneView.defaultView,
      currentViewKey: '',
      searchViewKey: '',
      contentViewKey: '',
      currentViewMap: searchViewMap,
      searchViewMap: searchViewMap,
      contentViewMap: contentViewMap,
      //数组模式
      currentViewIndex: 0,
      searchViewIndex: 0,
      contentViewIndex: 0,
      /* viewData--end */

      /* metaInfo--start */
      metaInfoView: MetaView.defaultView,
      /* metaInfo--end */
      /* result--start */
      resultView: ListView.defaultView,
      /* result--end */
      /* text-content-start */
      textContentView: TextContentView.defaultView,
      /* text-content-end */
      /* picture-content-start */
      pictureContentView: PictureContentView.defaultView
      /* picture-content-end */
    }
  },
  setup() {
    return {
      tabsRouteSet,
      indexType,
      ListView,
      MetaView,
      PictureContentView,
      TextContentView,
    }
  },
}
</script>
<style>
.window-blur {
    /* 未选中颜色 */
    background-color: #323233;
}

.window-focus {
    /* 未选中颜色 */
    background-color: #3C3C3C;
}
#lib-header-search-select-area {
  overflow-y: scroll;
  max-height: 251px !important;
}

.lib-header-search-condition-history-item td {
  display: flex;
  align-items: center;
}

.lib-header-search-condition-history-item-box {
  display: flex;
  justify-content: space-between;
  width: auto;
  align-items: center;
}

.lib-header-search-position-row-content {
  display: flex;
  align-items: center;
}

.lib-header-search-condition-history-item {
  font-size: 12px;
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.lib-header-search-condition-history-item-hover:hover {
  background-color: #2A2D2E;
}

.lib-header-search-position-row-checkbox {
  height: 14px !important;
  margin-right: 14px !important;
}

.lib-header-search-condition-label {
  margin-right: 10px;
  font-size: 12px;
  color: white;
}

.lib-header-search-position-row-content {
  display: flex;
  align-items: center;
}

.lib-header-search-condition-dist-item {
  font-size: 12px;
  display: flex;
  flex-wrap: nowrap;
  color: white;
}

#lib-header-search-condition-dist {
  width: 100%;
  margin-bottom: 5px;
}

#lib-header-search-condition-history {
  border-top: 1px solid gray;
  width: 100%;
}

.lib-header-search-condition-dist-item td {
  display: flex;
  align-items: center;
}

.lib-header-search-condition-dist-item-hover:hover {
  background-color: #2A2D2E;
}

.lib-header-search-condition-dist-item-isactive {
  background-color: #04395D;
}

.lib-header-search-position-row-checkbox {
  height: 14px !important;
  margin-right: 14px !important;
}

#lib-index-footer {
  height: 24px !important;
  background-color: #007ACC !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 5px;
  padding-left: 5px;
}

#lib-index-footer-right {
  display: flex;
  align-items: center;
}

.lib-index-footer-button {
  --el-button-hover-bg-color: #1F8AD2 !important;
  --el-button-bg-color: #007ACC !important;
  --el-button-size: 22.4px !important;
  --el-border: 0px !important;
  padding: 5px 6px !important;
  border-radius: 0px !important;
}

.lib-index-footer-button-alert {
  --el-button-hover-bg-color: #1F8AD2 !important;
  --el-button-bg-color: #007ACC !important;
  --el-button-size: 22.4px !important;
  --el-border: 0px !important;
  color: #F56C6C !important;
  padding: 5px 6px !important;
  border-radius: 0px !important;
}

.lib-index-footer-text {
  padding-right: 5px;
  padding-left: 5px;
  font-size: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 24px;
}

.lib-index-footer-text-hover:hover {
  background-color: rgb(31, 138, 210);
}

/* header */
.lib-header-search-input {
  width: 100%;
}

.search-index-header-input-select-option {
  display: flex;
  align-items: center;
}

.search-index-header-input-button {
  padding: 0px 10px 0px 10px !important;
}

.search-index-header-operate-button {
  padding: 0px 5px 0px 5px !important;
}

.lib-header-search-button {
  width: 45% !important;
  height: 24px !important;
  margin-right: 200px !important;
  margin-left: auto !important;
  -webkit-app-region: no-drag;
}

#lib-header-search-condition-radio-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 6.3px;
}

.lib-header-search-condition {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 3px;
  margin-left: 5px;
}

.lib-header-search-condition .el-radio-button__inner {
  border-radius: 0px !important;
}

#lib-index-header-button-group .el-button {
  --el-button-size: 24.42px !important;
  width: 33px !important;
  -webkit-app-region: no-drag;
  background-color: #3C3C3C !important;
  margin: 0 !important;
}

#lib-index-header {
  height: 34px;
  width: 100%;
  -webkit-app-region: drag;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.lib-header-search-input-area {
  width: auto;
  position: fixed;
  padding-bottom: 2px;
  margin-right: 50px !important;
  margin-left: 50px !important;
  top: 38px;
  left: 0px;
  right: 0px;
  padding-left: 4.2px;
  padding-right: 4.2px;
  background-color: #252526 !important;
}

/* lib--start */
#lib-index {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}


#lib-index-main {
  display: flex;
  width: 100%;
}

#lib-index-aside-menu-box {
  width: 48px !important;
}

#lib-index-aside-menu {
  width: 48px !important;
  --el-menu-bg-color: #333333 !important;
  height: 100% !important;
  border-right: none 0px !important;
}

.lib-index-aside-menu-item.el-menu-item {
  --el-menu-icon-width: 30px !important;
  --el-menu-base-level-padding: 0px !important;
  --el-menu-hover-bg-color: #333333 !important;
  --el-menu-hover-text-color: #FFFFFF !important;
  --el-menu-active-color: #FFFFFF !important;
  --el-menu-text-color: #858585 !important;
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.lib-index-aside-menu-item-hover.el-menu-item:hover {
  color: #FFFFFF !important;
}

#lib-index-aside-menu-item-last {
  position: absolute !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
}

.lib-index-aside-menu-item.el-menu-item [class^=el-icon],
.lib-index-aside-menu-item.el-menu-item .el-menu-tooltip__trigger {
  justify-content: center;
  margin: 0px !important;
}

/* tab--start */
.lib-index-main-tabs-prefix-scrollx-button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-left: 6px !important;
}

.lib-index-main-tabs-prefix-scrollx-button-group .el-button {
  margin: 0 !important;
  padding: 0 !important;
  border: 0px !important;
}

.lib-index-main-tabs-prefix {
  width: auto;
  display: flex;
  flex-wrap: nowrap;
}

.lib-index-main-tabs-suffix {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lib-index-main-tabs-suffix-button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 6px !important;
  margin-right: 6px !important;
}

.lib-index-main-tabs-suffix-button-group .el-button {
  margin: 0 !important;
  padding: 0 !important;
  border: 0px !important;
}

#lib-index-main-tabs {
  background-color: #252526;
  display: flex;
  height: 36px;
}

.lib-index-main-tabs-tabarea {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 36px;
  overflow-x: auto;
}

.lib-index-main-tabs-tabarea::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.lib-index-main-tabs-tab {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  padding-right: 12px;
  padding-left: 12px;
  border-right: 1px solid #252526;
}

.lib-index-main-tabs-tab-icon {
  margin-right: 4px;
  /* margin-top: 7px;
  margin-bottom: auto; */
}

.lib-index-main-tabs-tab-title {
  font-size: 13px;
  margin-right: 8px;
  white-space: nowrap;
  user-select: none;
}

.lib-index-main-tabs-tab--close-icon {
  padding: 1.5px;
  border-radius: 5px;
}

.lib-index-main-tabs-tab-unactive-close-icon:hover {
  background-color: rgb(59, 60, 60);
}

.lib-index-main-tabs-tab-active-close-icon {
  color: white !important;
}

.lib-index-main-tabs-tab-active-close-icon:hover {
  background-color: rgb(49, 50, 50);
  color: white !important;
}

.lib-index-main-tabs-tab-unactive-close-icon {
  color: #2D2D2D !important;
}

.lib-index-main-tabs-tab-unactive {
  background-color: #2D2D2D;
}

.lib-index-main-tabs-tab-unactive:hover .lib-index-main-tabs-tab-unactive-close-icon {
  color: rgb(157, 158, 158) !important;
}

.lib-index-main-tabs-tab-active {
  background-color: #1E1E1E;
}

/* tab--end */
</style>
  